<template >
  <div class="workcounttable">
    <!-- <div class="workcounttable_top"> -->
    <!-- 日期选择器 -->
    <!-- 发送日期：
      <div class="block"> -->
    <!-- <span class="demonstration">daterange</span> -->
    <!-- <el-date-picker v-model="value2" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size="default"
          :default-value="[new Date(), new Date()]" />
      </div>
      &nbsp;&nbsp;年级班级： -->
    <!-- <el-select v-model="value" class="m-2" placeholder="请选择" size="default">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      &nbsp;&nbsp;学生姓名：
      <el-input v-model="input" placeholder="请输入" maxlength="5" class="input" />&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary">查询</el-button>
      <el-button>重置</el-button>
    </div> -->
    <!-- 导出按钮 -->
    <div class="bottom">
      <!-- stripe :row-style="{background:'#F7F7F7'}" -->
      <!-- <div class="top">
        <div class="topright">
          <el-button class="btn-seal" @click="SendReminders">
            <el-icon>
              <FolderAdd />
            </el-icon> &nbsp;发送提醒
          </el-button>
        </div>
      </div> -->
      <el-table :data="tableData" border style="width: 100%" height="500" highlight-current-row="true" stripe
        :row-style="{ backgroundColor: '#FFFFFF' }" :header-cell-style="{ background: '#1EC695', color: '#ffffff' }">
        <el-table-column label="序号" fixed width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="student" label="学生姓名" width="100" align="center">
          <template #default="scope">
            {{ scope.row.student.name }}
          </template>
        </el-table-column>
        <el-table-column prop="student" label="年级班级" width="100" align="center">
          <template #default="scope">
            {{ scope.row.student.classes.gradeId + '年级' + scope.row.student.classes.classId + '班' }}
          </template>
        </el-table-column>
        <el-table-column prop="time" label="带药提醒" width="300" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="drawer = true">
              <span @click="details(scope.row.id)">感冒药一天吃三次,一次吃三颗</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="用药日期" width="140" align="center" />
        <el-table-column prop="zip" label="发送者" width="140" align="center">
          <template #default="scope">
            张天天妈妈
          </template>
        </el-table-column>
        <el-table-column prop="time" label="发送时间" width="140" align="center" />
        <el-table-column prop="zip" label="接收人" width="170" align="center">
          <template #default="scope">
            {{ scope.row.teacher.name }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作" width="130" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="deletelist(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看带药提醒抽屉 -->
      <el-drawer v-model="drawer" title="带药提醒">
        <div class="drawer" v-for="(item, index) in drawerList" :key="index"
          style="display: flex; flex-direction: column; justify-content: space-around; height: 500px;">
          <p><span>{{ item.student.name }}</span>/<span>{{ item.student.classes.gradeId }} 年级{{
            item.student.classes.classId }}班</span></p>
          <p style="color: #D7C4BD;"><span>{{ item.student.name }}妈妈</span><span>{{ item.time }}</span></p>
          <p>接收人：<span>{{ item.teacher.name }}</span></p>
          <p>用药日期：<span style="color: #646464;">{{ item.time }}</span></p>
          <p>内容：<span style="color: #646464;">{{ item.detail }}{{ item.title }}</span></p>
          <p>图片：<img src="" alt="" style="width: 150px; height: 150px; border: 1px solid gray;"></p>
        </div>
      </el-drawer>

      <!-- 分页 -->
      <!-- <div class="bottom2">
        <div class="demo-pagination-block">
          <el-pagination :page-sizes="[10, 20, 30, 40]" layout="  prev, pager, next,total,jumper,sizes," :total="50"
            prev-text="上一页" next-text="下一页" />
        </div>
      </div> -->
    </div>

  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import service from '@/api'
// import router from 'vue-router' //无用
import router from '@/router';
let drawer = ref()
let tableData: any = ref([])
let input: any = ref()
let value = ref()
let drawerList: any = ref([])
const size = ref<'default' | 'large' | 'small'>('default')

const value2: any = ref('')
onMounted(async () => {
  // 获取所有带药提醒
  let res1 = await service.xss.remind_getRemindByPage({ cp: 1, ps: 10 })
  tableData.value = res1.data.data.date
  // console.log(res1.data.data.date);
})
// 点击进入带药提醒详情查看根据id(所有的需要过滤)(带药详情信息)
const details = async (id: any) => {
  // console.log(id);
  let res2 = await service.xss.remind_getRemindById(id)
  drawerList.value = res2.data.data.filter((item: any) => item.id == id)
  // console.log(drawerList.value);
}
// 点击，根据id删除带药提醒
const deletelist = async (id: any) => {
  // console.log(id);
  let res3 = await service.xss.remind_deleteRemind(String(id))
  // console.log(res3);
}
// 点击发送带药提醒
const SendReminders = async () => {
  router.push('/SendReminders')
}
// 年级班级选择（模拟数据）
const options: any = [
  {
    value: '一年级一班',
    label: '一年级一班',
  },
  {
    value: '一年级二班',
    label: '一年级二班',
  },
  {
    value: '二年级一班',
    label: '二年级一班',
  },
  {
    value: '二年级二班',
    label: '二年级二班',
  },
  {
    value: '三年级一班',
    label: '三年级一班',
  },
  {
    value: '三年级二班',
    label: '三年级二班',
  },
]
// // 解决选不上
// // 将字符串转换位数组
// var numberId = options.numberId.split(',')
// console.log(numberId)
// var arrNumberId = []
// for (var arrNum in numberId) {
// arrNumberId.push(parseInt(numberId[arrNum]))
// }
// // 将新的numberId 数组，绑定到select空间的v-model上
//  options.value = arrNumberId


// let tableRowClassName = ref()

</script>
  
<style scoped>
.workcounttable_top {
  display: flex;
  align-items: center;
  padding: 30px;
  color: #312E28;
  background-color: white;
  overflow: hidden;
  margin-bottom: 20px;
}

.input {
  width: 200px;
}

/* 强制修改样式 */
:deep() .el-pager li.is-active {
  background-color: #1EC695;
  color: white;
}

.bottom2 {
  float: right;
}

.el-input__wrapper {
  float: right;
}

.btn-seal {
  color: white;
  background-color: rgb(23, 144, 255);
}

.workcounttable {
  padding: 30px;
  background-color: rgb(247, 247, 247);
}

.top {
  float: right;
  background-color: white;
  padding: 10px 0 10px 40px;
  margin-top: 20px;
}

.bottom {
  background-color: white;
  padding: 10px 40px;
}

/* 日期选择器 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/*抽屉drawer */
:deep() .drawer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
</style>